<template>
	<div class="theme">
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<van-swipe @change="onChange">
					<van-swipe-item>
						<van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
					</van-swipe-item>
					<van-swipe-item>
						<van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
					</van-swipe-item>
					<van-swipe-item>
						<van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg" />
					</van-swipe-item>
				</van-swipe>
				<div style="position:absolute;right: 0;margin: -30px 5px;background: white;padding: 0px 10px;border-radius: 10px;opacity: 0.5;font-size: 13px;">
					<span style="opacity: 1;color: black;">{{ current }}/3</span>
				</div>
				<div class="nav">
					<van-notice-bar left-icon="info-o" color="#1989fa" background="#ecf9ff" mode="link">
						通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容
					</van-notice-bar>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Home',
		components: {},
		props: {},
		data() {
			return {
				current: 0
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onChange(index) {
				this.current = index;
			}
		},
		created() {},
		mounted() {

		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	/deep/ .nav {
		margin-top: -5px;
	}
</style>